<template>
    <div>
        <el-dialog v-dialogDrag title="编辑权限" :visible="editShow" width="40%" @close="dialogClose">
            <el-form ref="editForm" :model="formFileds" :rules="rules" label-width="auto">
                <el-form-item label="权限名称：" prop="title">
                    <el-input type="text" v-model="formFileds.title"></el-input>
                </el-form-item>
                <el-form-item label="权限描述：" prop="describe">
                    <el-input type="textarea" :rows="3" v-model="formFileds.describe"></el-input>
                </el-form-item>
                <el-form-item label="权限类型：" prop="type">
                    <el-radio-group v-model="formFileds.type">
                        <el-radio label="菜单权限">菜单权限</el-radio>
                        <el-radio label="基本权限">基本权限</el-radio>
                        <el-radio label="操作权限">操作权限</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注：" prop="content">
                    <el-input type="textarea" :rows="2" v-model="formFileds.content"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm()" class="pull-right margin-l-25">确定
                    </el-button>
                    <el-button @click="dialogClose" class="pull-right">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default {
    //接受父组件
    props: {
        editShow: {
            type: Boolean
        },
        record: {
            type: Object
        }
    },

    data () {
        return {
            formFileds: {
                title: '',
                describe: '',
                type: '',
                content: ''
            },
            rules: {
                title: [{
                    required: true,
                    message: '请输入权限名称',
                    trigger: 'blur'
                }],
                describe: [{
                    required: true,
                    message: '请输入权限描述',
                    trigger: 'blur'
                }],
                type: [{
                    required: true,
                    message: '请选择权限类型',
                    trigger: 'change'
                }],
                content: [{
                    required: false,
                    message: ' ',
                    trigger: 'blur'
                }]
            },
        }
    },
    methods: {
        dialogClose () {
            this.$emit('dialogClose')
        },
        submitForm () {
            this.$refs.editForm.validate((valid) => {
                if (valid) {
                    alert('submit!');
                    this.$emit('dialogClose')
                }
                else {
                    return
                }
            });
        },


    },
    mounted () {
        this.formFileds = Object.assign({},this.record);
    }
}
</script>

<style lang="less" scoped>

</style>